<template>
	<!-- 实名认证1 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model+' '+(model=='light'?'p-stickyLight':'')">
			<view class="status_bar">
		
			</view>
			<view class="nav_bar flex align-center justify-between">
				<view @click="$tool.goBack()" class="f0 p-3">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.m082}}
				</view>
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="pt-3">
			
		</view>
		<view class="formWrap px-5 A-Regular">
			<!-- 国籍 -->
			<!-- <view class="formTitle">
				{{i18n.m083}}
			</view>
			<view @click="openPopup" class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input type="text" disabled v-model="nationality" :placeholder="i18n.m092"
					class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				<view class="f0">
					<image class="img2" src="/static/images/downArrow.png" mode=""></image>
				</view>
			</view> -->
			<!-- 证件类型 -->
			<view class="formTitle">
				{{i18n.m084}}
			</view>
			<view @click="openPopup2" class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input type="text" disabled v-model="cardType" :placeholder="i18n.m085"
					class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				<view class="f0">
					<image class="img2" src="/static/images/downArrow.png" mode=""></image>
				</view>
			</view>
			<!-- 姓名 -->
			<view class="formTitle">
				{{i18n.m086}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input type="text" v-model="name" :placeholder="i18n.m087"
					class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
			</view>
			<!-- 证件号码 -->
			<view class="formTitle">
				{{i18n.m088}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input type="text" v-model="cardNum" :placeholder="i18n.m089"
					class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
			</view>
		</view>
		<!-- 温馨提示 -->
		<view class="codeDesc mb-1 mx-6 flex align-start" style="color: #D22540;font-size: 26rpx;">
			{{i18n.m090}}
		</view>
		<view v-html="i18n.m091" class="codeDesc mx-6">
			
		</view>
		<!-- 下一步 -->
		<view @click="submit" class="btn mx-auto A-Medium mt-6 clickCss">
			{{i18n.m093}}
		</view>
		<!-- 选择国籍 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popupWrap pt-1 pb-2 A-Medium" :class="model=='light'?'popupWrapLight':''">
				<view @click="confirm(item)" v-for="(item,index) in nationalityList" :style="index==2?'border:none;':''" class="list py-3" :class="model=='light'?'listLight':''">
					{{item.title}}
				</view>
			</view>
		</uni-popup>
		<!-- 选择证件类型 -->
		<uni-popup ref="popup2" type="bottom">
			<view class="popupWrap pt-1 pb-2 A-Medium" :class="model=='light'?'popupWrapLight':''">
				<view @click="confirm2(item)" v-for="(item,index) in cardTypeList" :style="index==2?'border:none;':''" class="list py-3" :class="model=='light'?'listLight':''">
					{{item.name}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getNationalityList,
		applyRealname,
		cardAuth
	} from '@/core/api/user.js';
	export default {
		data(){
			return {
				account2:'',
				// 国籍
				nationalityList:[],
				nationality:'',
				nationalityValue:'',
				// 证件类型
				cardTypeList:[
					{
						id:1,
						name:'',
						value:'Card'
					},{
						id:2,
						name:'',
						value:'Passport'
					}
				],
				cardType:'',
				cardTypeValue:'',
				// 姓名
				name:'',
				// 证件号码
				cardNum:''
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			i18n() {
				return this.$t('mine');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		onLoad() {
			this.getNationalityLists();
			this.initDate();
		},
		methods:{
			submit(){
				if(this.cardType==='') return this.$tool.showToast(this.i18n.m085);
				if(this.name==='') return this.$tool.showToast(this.i18n.m087);
				if(this.cardNum==='') return this.$tool.showToast(this.i18n.m089);
				this.$tool.navTo('/pages/mine/nameAuth2?authType='+this.cardTypeValue + '&name=' + this.name + '&cardNum='+this.cardNum);
			},
			submit2(img1,img2){
				// if(this.nationality==='') return this.$tool.showToast(this.i18n.m092);
				if(this.cardType==='') return this.$tool.showToast(this.i18n.m085);
				if(this.name==='') return this.$tool.showToast(this.i18n.m087);
				if(this.cardNum==='') return this.$tool.showToast(this.i18n.m089);
				let data = {
					nationality:this.nationalityValue,
					authType:this.cardTypeValue,
					realname:this.name,
					identifyNumber:this.cardNum,
					mobileUserId:uni.getStorageSync('mobileUserId')
				}
				data.cardBack = img2;
				data.cardFront = img1;
				this.$tool.showLoading();
				// applyRealname(data).then(res=>{
				cardAuth(data).then(res=>{
					uni.hideLoading();
					this.$store.dispatch('config/getCustomerInfo');
					this.$tool.goBack(2);
				}).catch(err=>{
					console.log(err);
					if(err.message=='数据库中已存在该记录'){
						this.$tool.navTo('/pages/mine/nameAuth2?authType='+this.cardTypeValue,2);
					}
					uni.hideLoading();
				})
			},
			confirm2(item){
				this.closePopup2();
				this.cardType = item.name;
				this.cardTypeValue = item.value;
				this.name = ""
				this.cardNum = ""
			},
			openPopup2() {
				this.$refs.popup2.open('bottom');
			},
			closePopup2() {
				this.$refs.popup2.close();
			},
			confirm(item){
				this.closePopup();
				this.nationality = item.title;
				this.nationalityValue = item.value;
			},
			openPopup() {
				this.$refs.popup.open('bottom');
			},
			closePopup(){
				this.$refs.popup.close();
			},
			// 获取国籍列表
			getNationalityLists(){
				getNationalityList().then(res=>{
					console.log(res,'cs-getNationalityList');
					this.nationalityList = res.result;
				})
			},
			initDate() {
				for (let i = 0; i < this.cardTypeList.length; i++) {
					this.cardTypeList[i].name = this.i18n['m10' + (i)];
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	// 弹窗---开始
	.popupWrap {
		background: #0E0F11;
		font-size: 32rpx;
		color: #F7F7F7;
		.titleWrap {
			margin-bottom: 6rpx;
			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
		.list {
			text-align: center;
			border-bottom: 2rpx solid #1F2128;
		}
		.listLight {
			border-bottom: 2rpx solid #F4F4F4;
		}
	}
	.popupWrapLight {
		background: #ffffff;
		color: #0E0F11;
	}
	// 弹窗---结束
	.p-stickyLight {
		background: #fff;
	}
	.formWrap {
		.formTitle {
			font-size: 28rpx;
			color: #7F838D;
			margin-bottom: 22rpx;
		}
	
		.inputWrap {
			width: 650rpx;
			height: 88rpx;
			background: #16181C;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-bottom: 35rpx;
			
			.inputText {
				font-size: 28rpx;
				color: #F7F7F7;
				// text-align: right;
			}
			
			.inputTextLight {
				color: #0E0F11;
			}
			
			.placeholderClass {
				font-size: 28rpx;
				color: #7F838D;
			}
	
			.placeholderClassLight {
				color: #B5B7BF;
			}
	
			.img2 {
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.inputWrapLight {
			background: #FFFFFF;
		}
	}
	.codeDesc {
		font-size: 24rpx;
		color: #7F838D;
		.xing {
			color: #5951BA;
		}
	}
	.btn {
		width: 650rpx;
		height: 80rpx;
		background: #5951BA;
		border-radius: 74rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}
</style>